<template>
  <view class="conversation">
    <!-- 聊天内容列表 -->
    <view class="message-list">
      <template v-for="(item, index) in messageList">
        <view
          :key="item.ID"
          class="message-item"
          :class="{ reverse: item.from === userId }"
        >
          <u-avatar
            :src="item.from === userId ? baseurl + orderdetail.headImage : ''"
            size="80rpx"
            default-url="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/avatar.png"
          ></u-avatar>
          <view class="item-right">
            <view class="name" v-if="item.from !== userId"> 患者 </view>
            <view class="time">{{ item.time | filterTime }}</view>
            <!-- 带边距的内容 -->
            <view class="content" v-if="item.type !== 'TIMImageElem'">
              <!-- 文本内容 -->
              <text class="text" v-if="item.type === 'TIMTextElem'">
                {{ item.payload && item.payload.text }}
              </text>
              <!-- 描述症状内容 -->
              <!-- <view class="miaoshu-zhengzhuang">
								<view class="miaoshu-item">病情描述：哈哈哈</view>
								<view class="miaoshu-item">
									患病时长（天）：哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
								</view>
								<view class="miaoshu-item">医院检查：哈哈哈</view>
								<view class="miaoshu-item">用药情况：哈哈哈</view>
								<view class="miaoshu-img">
									<image
									@click="handlePreviewImage"
										class="img"
										:key="index"
										v-for="(item, index) in 3"
										src="/static/1.png"
										mode="aspectFill"
									></image>
								</view>
							</view> -->
              <!-- 病历报告已生成 -->
              <view
                v-else-if="
                  item.payload && item.payload.data === 'createDiseaseCase'
                "
                class="case-report"
                @click="goCaseReport"
              >
                病历报告已生成
              </view>
            </view>
            <!-- 图片内容 -->
            <image
              v-else-if="
                item.type === 'TIMImageElem' &&
                item.payload &&
                item.payload.imageInfoArray &&
                item.payload.imageInfoArray.length > 0
              "
              @click="
                handlePreviewImage(item.payload.imageInfoArray[0].imageUrl)
              "
              class="content-image"
              :src="item.payload.imageInfoArray[0].imageUrl"
              mode="aspectFill"
            ></image>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
import { getChatRecord } from '../../api/index.js'
export default {
  name: "conversation",
  props: {
    orderNumber: {
      type: [Number, String],
      default: "",
    },
    messageList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      userId: "",
      orderdetail: {},
      baseurl: "",
      ChatRecordquery: {
        orderNumber: "",
        pageNumber: 1, // 页数
        pageSize: 15, //每页显示的数量
      },
    };
  },
  onLoad(options) {
    this.baseurl = this.$store.state.chronic.baseUrl;
    if (options.orderdetail) {
      this.orderdetail = JSON.parse(decodeURIComponent(options.orderdetail));
      this.ChatRecordquery.orderNumber = this.orderdetail.orderNumber;
      this._getChatRecord();
    }
    this.userId = uni.getStorageSync("userId");
  },
  filters: {
    filterTime(time) {
      return uni.$dayjs(time * 1000).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  computed: {},
  methods: {
    _getChatRecord() {
      getChatRecord(this.ChatRecordquery).then((res) => {
        this.messageList = res.data;
      });
    },
    // 预览图片
    handlePreviewImage(url) {
      this.$utils.previewImage(url);
    },
    // 查看病历报告
    goCaseReport() {
      uni.navigateTo({
        url:
          "/pages/message/case-report/case-report?orderNumber=" +
          this.orderNumber,
      });
    },
    // 跳转辅料清单
    goMaterialsList() {
      uni.navigateTo({
        url:
          "/pages/message/materials-list/materials-list?orderNumber=" +
          this.orderNumber,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.conversation {
  width: 100%;
}

.message-list {
  width: 100%;
  padding: 40rpx;
}

.message-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-bottom: 40rpx;
  &:last-child {
    margin-bottom: 0;
  }
  .item-right {
    margin-left: 28rpx;
    width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .name {
    font-size: 28rpx;
    margin-bottom: 8rpx;
  }
  .time {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 20rpx;
  }
  // 带边距的内容
  .content {
    width: max-content;
    max-width: 448rpx;
    padding: 24rpx;
    background-color: #fff;
    border-radius: 16rpx;
    font-size: 0;
    // 文本内容
    .text {
      display: inline-block;
      font-size: 24rpx;
      text-align: justify;
      word-break: break-all;
    }
    // 描述症状内容
    .miaoshu-zhengzhuang {
      width: 100%;
      .miaoshu-item {
        font-size: 24rpx;
      }
      .miaoshu-img {
        width: 100%;
        margin-top: 20rpx;
        display: flex;
        flex-wrap: wrap;
        font-size: 0;
        .img {
          width: 120rpx;
          height: 120rpx;
          border-radius: 8rpx;
          margin-right: 20rpx;
          margin-bottom: 20rpx;
          &:nth-child(3n) {
            margin-right: 0;
          }
        }
      }
    }
    // 病历报告已生成
    .case-report {
      font-size: 24rpx;
      color: #3fa3fa;
    }
  }
  .content-image {
    width: 300rpx;
    height: 300rpx;
    border-radius: 16rpx;
  }
  // 反转的样式
  &.reverse {
    flex-direction: row-reverse;
    .item-right {
      margin-left: 0;
      margin-right: 28rpx;
      align-items: flex-end;
    }
    .content {
      background-color: #e0f0fe;
    }
  }
}
</style>
